<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section:first-child{
            width: 420px;
            display: flex;
            justify-content: space-around;
        }
        section:last-of-type{
            width: 420px;
            height: 420px;
            position: relative;
            margin-top: 10px;
        }
        .box{
            width: 420px;
            height: 420px;
            position: absolute;
            left: 0; top: 0;
            bottom: 0;right: 0;
            margin: auto;
            border: 1px solid #000;
            display: none;
        }
        .boxBlock{
            display: block;
        }
        .active{
            background: yellow;
        }
    </style>
</head>
<body>
    <section>
        <div class="btn active">11</div>
        <div class="btn">22</div>
        <div class="btn">33</div>
        <div class="btn">44</div>
    </section>
    <section>
        <div class="box boxBlock">11</div>
        <div class="box">22</div>
        <div class="box">33</div>
        <div class="box">44</div>
    </section>
    <script>
        var btn = document.getElementsByClassName('btn')
        var box = document.getElementsByClassName('box')
        for(var i = 0 ; i < btn.length;i++){
            btn[i].style.width = '100px'
            btn[i].style.height = '40px'
            btn[i].style.border = '1px solid black'

           
            btn[i].idx = i

            btn[i].onclick =function(){
                for(var j = 0 ; j < btn.length ; j++){
                    btn[j].className = 'btn'
                    box[j].className = 'box'
                    this.className = 'btn active'
                   
                   box[this.idx].className = 'box boxBlock'
                }
            }
        }

       
    </script>
</body>
</html>